import React, { useEffect, useState } from 'react'
import '../../assets/style/category.scss'
import api from '@/api'
import { Outlet, useNavigate } from 'react-router-dom'
export default function Category() {
  const [list,setList]=useState([])
  useEffect(()=>{
    getCategoryApi()
  },[])

  const nav=useNavigate()
  const getCategoryApi=async()=>{
    const result=await api.category.getCategory()
    console.log(result);
    setList(result.data.data)
  }
  const go=(arg)=>{
    // nav(`/category/categroy-product/${arg}`)
    nav(`/category/categroy-product?idx=${arg}`)
  } 
 
 
  return (
    <div className='category-container'>
      <div className='category-header'>
          {
            list.map((item,index)=><div className='item' key={item.id} onClick={()=>{go(index)}}>{item.name}</div>)
          }
      </div>
      <div className='category-main'>
        <Outlet></Outlet>
      </div>
    </div>
  )
}
